import * as PIXI from 'pixi.js'
import { nameFont } from '@renderer/utils/setting'
import { watch } from 'vue'
import { setPixi, getPixi, getPixiData, getData, getCardInfo } from '@renderer/store/modules/usePixiStore'
import useMainStore from '@renderer/store/modules/useMainStore'
import useMagic from '@renderer/store/modules/useMagicStore'
import useCardsStore from '@renderer/store/modules/useCardsStore'
import useModalStore from '@renderer/store/modules/useModalStore'
import useDiyStore from '@renderer/store/modules/useDiyStore'
import Card from '@renderer/views/Card'
import { useWindowSize } from '@vueuse/core'
import { bottomParams } from './params'
import { gsap } from 'gsap'
import { diyTypeClick, diyRankClick, diyCategoryClick, diyElementClick, diySeriesClick, diydataCategoryClick } from './indiv'
import { CATEGORY } from '@renderer/config'
import { abilityText } from '@renderer/utils/bundle'

const mainStore = useMainStore()
const cardsStore = useCardsStore()
const modalStore = useModalStore()
const diyStore = useDiyStore()
const { height } = useWindowSize()
const { scale } = mainStore.getAppAttr
// 监听当前页数, 滚动卡册
watch(
  () => cardsStore.current,
  (val) => {
    const cardSetsContainer = getPixi('cardSets')
    const bottomHeight = height.value / scale - 114 - 30
    bottomParams.quiet = false
    gsap.to(cardSetsContainer, {
      duration: 0.7,
      pixi: { positionY: -(val - 1) * bottomHeight },
      onComplete: () => {
        bottomParams.quiet = true
      },
    })
  },
)
// 监听卡册切换数据源
watch(
  () => cardsStore.from,
  (val) => {
    const illBtn = getPixi('illBtn')
    const creation = getPixi('creation')
    if (val === 'cards') {
      illBtn.visible = true
      creation.visible = false
    } else if (val === 'diys') {
      illBtn.visible = false
      creation.visible = true
    }
    Card()
  },
)
// 监听模态框状态
watch(
  () => modalStore.visible,
  (val) => {
    const modalContainer = getPixi('modal')
    modalContainer.visible = val
  },
)
// 监听DIY创作界面开关
watch(
  () => diyStore.visible,
  (val) => {
    const diyContainer = getPixi('diyModal')
    diyContainer.visible = val
    if (val) {
      diyStore.newWork()
    } else {
      diyStore.editCardId = -1
    }
  },
)
// 监听DIY种类选项
watch(
  () => diyStore.creationData.type,
  (val) => {
    // 影响攻击血量的显示
    getPixi(diyStore.uidMap.atk)!.visible = val === '生灵'
    getPixi(diyStore.uidMap.hp)!.visible = val === '生灵'
    const uidArr = diyTypeClick.whiteList
    uidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightTypeContainer = getPixi(pixiData.rightType)
      rightTypeContainer.visible = pixiData.key === val
      // 种类变化引起类别变化
      const categoryContainer = getPixi(pixiData.category)
      categoryContainer.visible = pixiData.key === val
      // 重置选项
      if (pixiData.key === val) {
        diyStore.creationData.category = Object.keys(CATEGORY[pixiData.key as keyof typeof CATEGORY])[0] as Wx.Card.Category
      }
    })
  },
)

// 监听DIY类别选项
watch(
  () => diyStore.creationData.category,
  (val) => {
    // 原版类别
    const uidArr = diyCategoryClick.whiteList
    uidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightCategoryContainer = getPixi(pixiData.rightCategory)
      rightCategoryContainer.visible = pixiData.key === val
    })
    // 自定义类别
    const diyUidArr = diydataCategoryClick.whiteList
    diyUidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightCategoryContainer = getPixi(pixiData.rightCategory)
      rightCategoryContainer.visible = pixiData.key === val
    })
  },
)
// 监听DIY元素选项
watch(
  () => diyStore.creationData.element,
  (val) => {
    const uidArr = diyElementClick.whiteList
    uidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightElementContainer = getPixi(pixiData.rightElement)
      rightElementContainer.visible = pixiData.key === val
    })
  },
)
// 监听DIY品阶选项
watch(
  () => diyStore.creationData.rank,
  (val) => {
    const uidArr = diyRankClick.whiteList
    uidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightSeriesContainer = getPixi(pixiData['rightSeries_' + diyStore.creationData.series])
      rightSeriesContainer.visible = pixiData.key === val
    })
  },
)

// 监听DIY系列选项
watch(
  () => diyStore.creationData.series,
  (val) => {
    const uidArr = diySeriesClick.whiteList
    uidArr.forEach((uid) => {
      const pixiData = getPixiData(uid)
      const selectionType = getPixi(uid).children[1]
      selectionType.visible = pixiData.key === val
      // 映射到右侧
      const rightSeriesContainer = getPixi(pixiData['rightSeries_' + diyStore.creationData.rank])
      rightSeriesContainer.visible = pixiData.key === val
    })
  },
)
// 监听DIY攻击文本
watch(
  () => diyStore.creationData.atk,
  (val) => {
    const uid = diyStore.uidMap.atk
    const previewText = getPixi(uid) as PIXI.Text
    if (previewText) {
      previewText.text = val ? val : ''
    }
    const inputText = getPixi(diyStore.optionUidMap.atk) as PIXI.Text
    if (inputText) {
      inputText.text = val ? val : ''
    }
  },
)
// 监听DIY生命文本
watch(
  () => diyStore.creationData.hp,
  (val) => {
    const uid = diyStore.uidMap.hp
    const previewText = getPixi(uid) as PIXI.Text
    if (previewText) {
      previewText.text = val ? val : ''
    }
    const inputText = getPixi(diyStore.optionUidMap.hp) as PIXI.Text
    if (inputText) {
      inputText.text = val ? val : ''
    }
  },
)
// 监听DIY消耗文本
watch(
  () => diyStore.creationData.consume,
  (val) => {
    const uid = diyStore.uidMap.consume
    const previewText = getPixi(uid) as PIXI.Text
    if (previewText) {
      previewText.text = val ? val : ''
    }
    const inputText = getPixi(diyStore.optionUidMap.consume) as PIXI.Text
    if (inputText) {
      inputText.text = val ? val : ''
    }
  },
)
// 监听DIY名称文本
watch(
  () => diyStore.creationData.name as string,
  (val) => {
    const uid = diyStore.uidMap.name
    const container = getPixi(uid) as PIXI.Container
    if (container) {
      container.removeChildren()
      const nameArr = val.split('')
      const nameSetting = nameFont(nameArr.length)
      val.split('').forEach((item, index) => {
        const text = new PIXI.Text({
          text: item,
          alpha: 0.8,
          style: {
            fontFamily: 'RZFont',
            fontSize: nameSetting.fontSize,
            fill: 0xffffff,
            align: 'center',
            dropShadow: {
              alpha: 0.55,
              distance: 3,
            },
          },
        })
        text.anchor.set(0.5)
        text.position.set(0, 30 - 256 / 2 + nameSetting.startY + index * nameSetting.lineSize)
        container.addChild(text)
      })
    }
    const inputText = getPixi(diyStore.optionUidMap.name) as PIXI.Text
    if (inputText) {
      inputText.text = val ? val : ''
    }
  },
)
// 监听DIY能力文本
watch([() => diyStore.creationData.ability as string, () => diyStore.creationData.transform.abilityFontSize], async () => {
  const uid = diyStore.uidMap.ability
  const container = getPixi(uid) as PIXI.Container
  if (container) {
    await abilityText(diyStore.creationData, container)
  }

  const textareaText = getPixi(diyStore.optionUidMap.ability) as PIXI.Text
  if (textareaText) {
    textareaText.text = diyStore.creationData.ability || ''
  }
})
// 监听DIY描述字号
watch(
  () => diyStore.creationData.transform.abilityFontSize,
  (val) => {
    const sprite = getPixi(diyStore.optionUidMap.abilityFontSize) as PIXI.Text
    sprite.text = val
  },
)

// 监听DIY选择图片操作
watch(
  () => diyStore.imageSource.select,
  async () => {
    // 设置数据
    diyStore.editCardId = -1 // 卡图来自外部
    // 清空容器
    const container = getPixi(diyStore.imageUid)
    container.removeChildren()
    // 通过导入的数据设置卡图
    if (diyStore.creationData.picture) {
      await PIXI.Assets.load({ alias: String(diyStore.creationData.id), src: diyStore.creationData.picture })
      const sprite = PIXI.Sprite.from(String(diyStore.creationData.id)) // 创建精灵
      sprite.anchor.set(0.5)
      // 通过选择图片设置卡图
      diyStore.creationData.transform.realWidth = sprite.width
      diyStore.creationData.transform.realHeight = sprite.height
      diyStore.creationData.transform.minScale = Math.max(useMagic().PICTURE_BASE_SIZE / sprite.width, useMagic().PICTURE_BASE_SIZE / sprite.height) // 最小缩放倍数
      diyStore.creationData.transform.scale = diyStore.creationData.transform.minScale
      diyStore.creationData.transform.x = 0
      diyStore.creationData.transform.y = 0
      sprite.scale.set(diyStore.creationData.transform.minScale * useMagic().PICTURE_SCALE_COEFFICIENT)
      container.addChild(sprite)
      setPixi(sprite.uid, sprite)
    }
  },
)

// 监听DIY数据导入操作
watch(
  () => diyStore.imageSource.import,
  async () => {
    // 设置数据
    diyStore.editCardId = -1 // 卡图来自外部
    // 清空容器
    const container = getPixi(diyStore.imageUid)
    container.removeChildren()
    // 通过导入的数据设置卡图
    if (diyStore.creationData.picture) {
      await PIXI.Assets.load({ alias: String(diyStore.creationData.id), src: diyStore.creationData.picture })
      const sprite = PIXI.Sprite.from(String(diyStore.creationData.id)) // 创建精灵
      sprite.anchor.set(0.5)
      sprite.scale.set(diyStore.creationData.transform.scale * useMagic().PICTURE_SCALE_COEFFICIENT)
      sprite.position.set(diyStore.creationData.transform.x, diyStore.creationData.transform.y)
      container.addChild(sprite)
      setPixi(sprite.uid, sprite)
    }
  },
)

// 监听DIY卡牌编辑操作
watch(
  () => diyStore.imageSource.edit,
  async () => {
    // 设置数据
    diyStore.improtData = false // 卡图来自编辑
    // 清空容器
    const container = getPixi(diyStore.imageUid)
    container.removeChildren()
    // 通过所编辑的卡牌ID获取卡图
    if (diyStore.editCardId !== -1) {
      const uid = getCardInfo(diyStore.editCardId) // 获取卡牌信息
      const assets = getData(uid)._assets // 获取卡图纹理
      const sprite = new PIXI.Sprite(assets) // 创建卡图精灵
      sprite.anchor.set(0.5)
      sprite.scale.set(diyStore.creationData.transform.scale * useMagic().PICTURE_SCALE_COEFFICIENT)
      sprite.position.set(diyStore.creationData.transform.x, diyStore.creationData.transform.y)
      setPixi(sprite.uid, sprite)
      container.addChild(sprite)
    }
  },
)
